<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <!-- @click 直接绑定 useDrawer 暴露的方法即可。如果想做一些额外的逻辑，可以再套一层方法 -->
      <a-button type="primary" class="mt-4 mb-4" @click="doOpenDrawer"> 动态详情抽屉 </a-button>

      <!-- 任意位置，引入弹窗组件 -->
      <DrawerDetailDynamic @register="register" />

      <div>
        <p>动态加载详情:</p>
        <p>父组件: 打开抽屉时，向抽屉传递参数</p>
        <p>子组件:</p>
        <p>
          <ul>
            <li>useDrawerInner 接受父组件传递的参数</li>
            <li>设置加载动画:  :loading="true"</li>
            <li>setup 方法中加载数据，数据加载完成通过 setDrawerProps 关闭动画</li>
          </ul>
        </p>
      </div>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 自定义 modal 组件
  import DrawerDetailDynamic from './DrawerDetailDynamic.vue';

  // vben modal 组件
  import { useDrawer } from '@/components/Drawer';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openDrawer }] = useDrawer();

  // 打开抽屉时，同时传递参数
  function doOpenDrawer() {
    openDrawer(true, {
      id: 1001,
    });
  }
</script>

<script lang="ts">
  function getDoc() {
    return `


#### 父组件

\`\`\`html
\<template\>
    <!-- @click 直接绑定 useDrawer 暴露的方法即可。如果想做一些额外的逻辑，可以再套一层方法 -->
    <a-button type="primary" class="mt-4 mb-4" @click="doOpenDrawer"> 简单抽屉 </a-button>

    <!-- 任意位置，引入弹窗组件 -->
    <DrawerDetail @register="register" />
\</template\>

\<script lang="ts" setup\>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // 自定义 modal 组件
  import DrawerDetailDynamic from './DrawerDetailDynamic.vue';

  // vben modal 组件
  import { useDrawer } from '@/components/Drawer';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openDrawer }] = useDrawer();

  // 打开抽屉时，同时传递参数
  function doOpenDrawer() {
    openDrawer(true, {
      id: 1001,
    });
  }
\</script\>

\`\`\`

### DrawerDetailDynamic 组件
\`\`\`html

<template>
  <!-- 子组件必须添加 v-bind="$attrs",  通过父传孙的方式传递给 antd 的原生组件中 -->
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title="动态详情抽屉"
    width="40%"
    :loading="true"
  >
    <p>用户参数:{{ receiveParams }}</p>
    <p>加载的数据:{{ dynamicData }}</p>
  </BasicDrawer>
</template>

\<script lang="ts" setup\>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  // 接收父组件传的参数
  let receiveParams = {};

  // 接收动态加载的数据
  let dynamicData = ref({});

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { setDrawerProps }] = useDrawerInner((data) => (receiveData = data));

  // 加载数据
  function loadData() {
    console.log('发起网络请求，加载数据:', receiveParams.id);

    // 模拟3秒耗时
    setTimeout(() => {
      setDrawerProps({ loading: false });
      dynamicData.value = '详情加载成功';
    }, 3000);
  }

  // 开始加载数据
  loadData();
\</script\>
\`\`\`


`;
  }
</script>
